import React, { Ref, useRef, useMemo } from 'react';
import { IOneModalRef } from '@/pages/type';
import { OneModal } from '@/components/one-ui';
import { MaterialManageAPI } from '../common/type';
import { applyMaterialServices, publishMaterialServices } from '../services';
import { CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { Button, Spin, message } from 'antd';
import { onCloseModalCommon } from '@/utils';
/**
 *
 * @param curRes  权限
 * @param onClose  取消modal
 * @param checkRows  点击的行数据
 * @param isShowModal  modal 是否显示
 * @param reloadManage  刷新管理页面
 */
const ApplySignModal: React.FC<MaterialManageAPI.IApplySignAPI> = ({ onClose, checkRows, reloadManage, modalType, isShowIdName, onCloseModalParent }) => {
  /**弹框的ref*/
  const ManageApplyModalRef: Ref<IOneModalRef> = useRef(null);

  /**发布方法Callback*/
  const publishMaterialCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      onCloseModalCommon(ManageApplyModalRef);
      setTimeout(() => {
        onCloseModalParent();
        reloadManage();
      }, 700);
    }
  };

  /**申请方法Callback*/
  const applyMaterialCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message.success(res?.msg);
      onCloseModalCommon(ManageApplyModalRef);
      setTimeout(() => {
        onCloseModalParent();
        reloadManage();
      }, 800);
    } else {
      message?.error('物料添加失败，请检查信息！');
      onCloseModalCommon(ManageApplyModalRef);
    }
  };

  /**发布方法services*/
  const { publishMaterialRun, publishMaterialLoading } = publishMaterialServices(publishMaterialCallback);

  /**申请方法services*/
  const { applyMaterialRun, applyMaterialLoading } = applyMaterialServices(applyMaterialCallback);

  const onApplySion = () => {
    /**判断是发布还是申请*/
    if (modalType && modalType == 'publish') {
      publishMaterialRun(checkRows);
    }
    if (modalType && modalType == 'apply') {
      applyMaterialRun(checkRows);
    }
  };

  const cptState = useMemo(() => {
    if (modalType && modalType == 'publish') return { title: '发布' };
    else if (modalType && modalType == 'apply') return { title: '申请' };
    else return { title: '' };
  }, [modalType]);

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={ManageApplyModalRef}
        title={cptState?.title + '物料'}
        width={document.body.clientWidth * 0.23}
        bodyStyle={{
          padding: '5px 0px',
        }}
        onCancel={() => {
          onCloseModalCommon(ManageApplyModalRef);
          onClose();
        }}
        onOk={onApplySion}
        // footer={[
        //   <Button
        //     key="back"
        //     loading={publishMaterialLoading || applyMaterialLoading}
        //     onClick={() => {
        //       onCloseModalCommon(ManageApplyModalRef);
        //       // onClose();
        //     }}
        //     icon={<CloseCircleOutlined />}
        //   >
        //     取消
        //   </Button>,
        //   <Button
        //     key="submit"
        //     type="primary"
        //     loading={publishMaterialLoading || applyMaterialLoading}
        //     onClick={onApplySion}
        //     icon={<CheckCircleOutlined />}
        //   >
        //     确定
        //   </Button>
        // ]}
        confirmLoading={publishMaterialLoading || applyMaterialLoading} //按钮loading
      >
        <Spin spinning={publishMaterialLoading || applyMaterialLoading}>
          <div
            style={{
              textAlign: 'left',
              lineHeight: '35px',
              fontSize: '1rem',
              padding: '20px 45px',
            }}
          >
            {isShowIdName && isShowIdName == 'id' && (
              <div style={{ textAlign: 'center' }}>
                物料编号为【<span style={{ color: 'red' }}>{checkRows?.materialNum || '--'}</span>】<br />
                请确认是否{cptState?.title || '--'}物料 ?
              </div>
            )}
            {isShowIdName && isShowIdName == 'name' && (
              <div style={{ textAlign: 'center' }}>
                确认是否{cptState?.title || '--'}【<span style={{ color: 'red' }}>{checkRows?.fullName || '--'}</span>】物料 ?
              </div>
            )}
          </div>
        </Spin>
      </OneModal>
    </>
  );
};

export default ApplySignModal;
